<template>
  <div class="NewFrom">
    <div>冷库新增(温湿度列表):addWlist</div>
    <el-row :gutter="15">
      <el-form ref="elForm" class="info_view" :model="formData" :rules="rules" size="medium" label-width="200px"
        label-position="top">
        <el-col :span="24" class="form-col">
          <el-form-item label="设备号:" prop="tc">
            <el-input v-model="formData.tc" placeholder="请输入设备号" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="采集时间:" prop="time">
            <el-date-picker v-model="formData.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择采集时间" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-col">
          <el-form-item label="标识名:" prop="name">
            <el-input v-model="formData.name" placeholder="请输入标识名" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-col">
          <el-form-item label="温度阈值:" prop="temperature">
            <el-input v-model="formData.temperature" placeholder="请输入温度阈值" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-col">
          <el-form-item label="温度（℃）:" prop="temperaturefw">
            <el-input v-model="formData.temperaturefw" placeholder="请输入温度（℃）" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-col">
          <el-form-item label="湿度阈值:" prop="humidity">
            <el-input v-model="formData.humidity" placeholder="请输入湿度阈值" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-col">
          <el-form-item label="湿度（%RH）:" prop="humidityfw">
            <el-input v-model="formData.humidityfw" placeholder="请输入湿度（%RH）" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <el-form-item size="large">
            <el-button type="primary" @click="saveForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
// import { parseStrEmpty } from '@/utils/ruoyi'
// import { checkPermi } from '@/utils/permission'
// 添加
// import { addHumitureInfo } from '@/api/record/record'
import axios from 'axios'
export default {
  components: {},
  props: {},
  data() {
    return {
      pageNum: 1, // 当前页
      pageSize: 1, // 页大小
      id: null, // 在组件的data中定义id属性
      formData: {
        tc: '',
        time: null,
        name: '',
        temperature: '',
        temperaturefw: '',
        humidity: '',
        humidityfw: ''
      },
      rules: {
        tc: [],
        time: [
          {
            required: true,
            message: '请选择采集时间',
            trigger: 'change'
          }
        ],
        name: [],
        temperature: [],
        temperaturefw: [],
        humidity: [],
        humidityfw: []
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    saveForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return

        // 直接获取表单数据模型 (方法一)
        // const data = this.$refs['elForm'].model

        // 构建需要传递给接口的数据对象 (方法二)
        const data = {
          tc: this.formData.tc,
          time: this.formData.time,
          name: this.formData.name,
          temperature: this.formData.temperature,
          temperaturefw: this.formData.temperaturefw,
          humidity: this.formData.humidity,
          humidityfw: this.formData.humidityfw
        }
        // 打印验证通过后的数据
        console.log('要修改的表单数据:', data)

        axios
          .post('http://125.76.225.197:8087/humidity', data, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then((response) => {
            const responseData = response.data

            if (responseData && responseData.code === 200) {
              console.log('添加成功：', responseData.data)
              this.$refs['elForm'].resetFields()
              this.$message({
                type: 'success',
                message: '保存成功！'
              })
              // 触发保存成功事件，通知父组件进行页面跳转或数据更新
              this.$emit('saved')
            } else {
              console.error('添加失败：', responseData)
              this.$message.error('保存失败，请重试！')
            }
          })
          .catch((error) => {
            console.error('添加失败：', error)
            this.$message.error('保存失败，请重试！')
          })
          .finally(() => {
            // 这里可以放一些无论成功还是失败都需要执行的逻辑
          })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>

<style>
.NewFrom {
  width: 98%;
  margin-left: 1%;
  border: 1px solid #ecf9fc;
}

.el-form--label-top .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 0;
}

.form-col {
  margin-bottom: 10px;
  /* 两个 <el-col :span="24"> 之间的距离 */
}
</style>
